<template>
  <el-drawer custom-class="global-drawer" v-bind="config" :append-to-body="true" :size="1200" :modal="false" @close="close">
    <slot></slot>
    <div class="drawer-footer" v-show="!_.isEmpty(btnConfig)">
      <template v-for="btn in btnConfig">
        <el-button :type="btn.type" @click="action(btn)">{{btn.label}}</el-button>
      </template>
    </div>
  </el-drawer>
</template>

<script>
export default {
  name:"GDrawer",
  props:{
    config:{
      type:Object,
      default:function(){
        return {'title':"",'visible':false,btns:[{label: this.$t('common.cancel'),invalid:"cancel"},{label: this.$t('common.save'),type:"primary",invalid:"confirm"}]}
      }
    },
  },
  computed:{
    btnConfig(){
      if(Array.isArray(this.config.btns)){
        return this.config.btns
      }
      return [{label: this.$t('common.cancel'),invalid:"cancel"},{label: this.$t('common.save'),type:"primary",invalid:"confirm"}]
    }
  },
  methods:{
    action(btn){
      if(['cancel'].includes(btn.invalid)){
        let config = this.config;
        config.visible = false;
        this.$emit("update:config",config)
      }
      this.$emit(btn.invalid)
    },
    close(){
      let config = this.config;
      config.visible = false;
      this.$emit("update:config",config)
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.global-drawer{
  .drawer-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background: #ededed;
    z-index: 999;
  }
}

</style>